<template>
  <div>
    <router-view v-slot="{ Component }">
      <transition name="slide-fade">
        <keep-alive>
          <component
            :is="Component"
            v-if="$route.meta.keepAlive"
            :key="$route.fullPath"
          />
        </keep-alive>
      </transition>
      <transition name="slide-fade">
        <component
          :is="Component"
          v-if="!$route.meta.keepAlive"
          :key="$route.fullPath"
        />
      </transition>
    </router-view>
  </div>
</template>

<script lang="ts" setup></script>

<style lang="less" scoped>
.slide-fade-enter-active {
  transition: all 0.2s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(-50px);
  opacity: 0;
}
</style>
